<template>
  <!--所有标签都必须写在一个div中-->
  <div id="container">
    <el-row>
      <h1><i class="el-icon-eleme"></i>{{sysname}}</h1>

    </el-row>
    <el-row>
      <el-button type="primary" @click="toadd()" icon="el-icon-search">添加</el-button>
    </el-row>
    <el-row>
      <el-table :data="list" style="100%">
        <el-table-column prop="title" label="标题" width="200" header-align="center" />
        <el-table-column prop="sellpoint" label="卖点" width="200" align="center" header-align="center" />
        <el-table-column prop="price" label="价格" align="right" />
        <el-table-column prop="introduce" label="说明" header-align="center" />

        <el-table-column label="[操作]" width="220">

          <template slot-scope="s">
            <!--两个参数：第一个是当前行的索引值，第二个是当前行数据-->
            <el-button type="success" @click="toupdate(s.$index,s.row)" icon="el-icon-check">修改</el-button>
            <el-button type="danger" @click="del(s.$index)" icon="el-icon-delete-solid">删除</el-button>
          </template>

        </el-table-column>



      </el-table>
    </el-row>

    <!--怎么控制对话框是否展现？dialogVisible布尔变量true展现，false关闭
变量要在 数据区声明的
v-bind：visible 属性element-ui检查属性，设置是否展现div，display：none
-->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>
        <el-form :model="model" label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="model.title">

            </el-input>
          </el-form-item>

          <el-form-item label="卖点">
            <el-input v-model="model.sellpoint">

            </el-input>

          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="model.price">

            </el-input>

          </el-form-item>

          <el-form-item label="说明">
            <el-input type="textarea" v-model="model.introduce">

            </el-input>
          </el-form-item>

        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button @click="save()">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  //这个数据区，只允许本组件使用
  export default { //相当于new vue
    name: 'Item',
    data() {
      return {
        sysname: '京东电商平台',
        dialogVisible: false, //负责对话框是否展现
        isUpdate:false,//新增按钮设置false，修改按钮true,
        //有了这个值，save方法就知道是新增还是修改了
        model: { //临时存放一条数据结构model，pojo
          title: "",
          sellpoint: '',
          price: 0,
          introduce: ''
        },
        list: [{
            title: "如花",
            sellpoint: "太丑",
            price: "100"
          },
          {
            title: "java入门手册",
            sellpoint: "谁都不懂",
            price: "88",
            introduce: "经典书籍"
          },
          {
            title: "金瓶梅",
            sellpoint: "人性",
            price: "100000",
            introduce: "激情四射"
          }
        ]
      }
    },
    methods: {
      toadd: function() {
        //防止数据已经有值，干扰，清空数据
        this.model = {};
        //展现对话框,要调用数据区中的数据，要加this关键字
        this.dialogVisible = true;
        this.isUpdate=false;
      },
      save: function() { //这个方法服用，新增和修改都使用它
        if(!this.isUpdate){
           //在list数组中新增元素
        this.list.splice(0, 0, this.model);
        }else{
          //修改,在修改按钮中通过插槽传入index，可以设置全局变量，来记录这个值
          //1.数据区：index变量，2.修改按钮，设置index，3.在这获取数据区index
           index:null,//全局变量，获取当前的索引值
          this.list.splice(this.index,1,this.model);
        }

        this.dialogVisible = false;

      },
      del:function(index){
        //通过插槽vue+element-ui提供，它就把index索引值传递过来
        //删除指定数组的索引值，删除1个
        this.list.splice(index,1);
      },
      toupdate: function(index,row){
     //获取当前数据，回显
     //this.model=row;//row和model是一个引用！！一个改全都改，解决办法：把它们关系取消
     //不是同一个引用
     this.model=JSON.parse(JSON.stringify(row));
     this.dialogVisible=true;
     this.isUpdate = true;
      this.index=index;//前面的index是全局参数，数据区中定义的，
      //后面index是toupdate的参数
      }
    }

  }
</script>

<style>
  textarea{
    /*这个字体不一致，是element-ui自己的问题*/
    font-family: "微软雅黑";
  }
</style>
